<template>
	<view class="">
		<view class="bgf pt29 pb39">
			<view class="w-calc-30 pt20 esay-out1">
				<u-search v-model="queryParams.title" placeholder="输入你要找的车源" placeholderColor="#BDBCBA" shape="square"
					height="73rpx" :showAction="false"></u-search>
			</view>
		</view>
		<view class="tongbu">
			<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/pengyouquan.png" size="38rpx"></u-icon>
			<text>同步朋友圈车源</text>
		</view>
		<scroll-view scroll-y class="w-calc-30" :refresher-enabled="scrollViewTool.isEnabled"
			:refresher-triggered="scrollViewTool.triggered" refresher-background="rgba(0,0,0,0)"
			@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false" :upper-threshold="100"
			:lower-threshold="100" @refresherabort="triggered = false" @scrolltolower="reachBottom">
			<!-- 批发 -->
			<view class="esay-out3 bgf radius20 plr24 ptb17 border-box" v-if="true">
				<view class="item-ctn">
					<view class="top">
						<u-avatar src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/good1.jpg" size="82rpx"></u-avatar>
						<view class="center-box">
							<view class="nt">
								<text class="name">重庆二手车主黄生</text>
								<text class="time">12小时前</text>
							</view>
							<view class="addr">
								<u-icon name="map" size="23rpx" color="#5b5b5b"></u-icon>
								<view class="ml6">重庆市</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					高价求购19年20年21年22年23年24年本田CRV，本田皓影，本田URV，本田冠道，黑色白色都可以，车好公里小的，高价要，只要车好，价格顶高高，油的混动的都可以，包牌包税的也可以，欢迎各位老板贸易咨询，一次合作终身朋友，期待合作
				</view>
				<view class="mt20">
					<u-album :urls="urls" multipleSize="200rpx" radius="19rpx" space="21rpx" :maxCount="3"></u-album>
					<view class="center mt26 mb13 color6 fs22">
						<text class="pr10">展开</text>
						<u-icon name="arrow-down" size="12rpx"></u-icon>
					</view>
				</view>
				<view class="mt13 justify-between">
					<view class="funcs">
						<view class="func">
							<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/home-source.png" width="43rpx"
								height="43rpx"></u-image>
							<text>同步到首页车源</text>
						</view>
					</view>
					<view class="buts">
						<view class="but zoom2 but-gray">
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			<u-line color="#EDEDED" margin="31rpx 0"></u-line>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		savePhotos,
		navTo
	} from '@/core/app';
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList.js';
	import {
		getMyCarSource
	} from "@/api/user/carSource";
	const queryParams = ref({
		apply_status: 1, //0待审核 1通过 2拒绝 -1关闭
		keywords: '', //搜索
		type: 4, //1求购 2收购 3批发 4车源  0所有
	});
	let current = ref(0)

	const {
		listData,
		getListData,
		listDataDelay,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} =
	useLoadPageList(getMyCarSource, queryParams.value);
	getListData()

	const urls = [
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg',
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg',
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg',
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg'
	];

	const tabs = ref([{
			label: '全部',
			value: ''
		},
		{
			label: '车源',
			value: 'car'
		},
		{
			label: '批发',
			value: 'batch'
		},
		{
			label: '求购',
			value: 'qiugou'
		},
		{
			label: '收购',
			value: 'shougou'
		}
	]);
</script>

<style scoped lang="scss">
	:deep(.u-search__content) {
		border-radius: 20rpx !important;
	}

	.input-ctn {
		width: 100%;
		height: 73rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #0759bb;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 16rpx;
		box-sizing: border-box;

		.input-css {
			font-weight: 400;
			font-size: 26rpx;
		}

		.holder {
			font-weight: 400;
			font-size: 26rpx;
			color: #bdbcba;
		}
	}

	.good-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.tag {
			position: absolute;
			top: 0;
			left: 0;
			background: #f9de49;
			border-radius: 10rpx 0rpx 10rpx 0rpx;
			width: 122rpx;
			height: 35rpx;
			padding: 4rpx 10rpx 3rpx 11rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
		}

		.name {
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.time {
			font-weight: 400;
			font-size: 24rpx;
			color: #606060;
			margin-top: 6rpx;
			text-align: left;
		}

		.price {
			font-weight: 600;
			font-size: 30rpx;
			color: #d74b34;
			text-align: right;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;

				.point {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #606060;

					.text {
						margin-left: 6rpx;
					}
				}

				.date {
					font-weight: 400;
					font-size: 24rpx;
					margin-left: 17rpx;
				}
			}

			.right {
				padding-bottom: 3rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;
			}
		}
	}

	.item-ctn {
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.center-box {
				margin-left: 19rpx;
				flex: 1;

				.nt {
					width: 100%;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.time {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.addr {
					margin-top: 11rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #5b5b5b;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.phone {
				width: 112rpx;
				height: 48rpx;
				background: rgba(73, 133, 205, 0.2);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #0759bb;
				font-weight: 400;
				font-size: 23rpx;
				color: #0759bb;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.content {
		padding: 0 7rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.funcs {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.func {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #0759bb;
			gap: 5rpx;
		}
	}

	.buts {
		gap: 16rpx;
		display: flex;

		.but {
			width: 160rpx;
			height: 70rpx;
			border-radius: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 12rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
		}

		.but-gray {
			background: #9a9a9a;
		}
	}

	.tongbu {
		padding: 14rpx 45rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 11rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #0759BB;
	}
</style>